<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script src="./js/vue.js"></script>
    <div class="box">
        <!-- {{}}双大括号表达式或者称为  Mustache语法 作用：显示data中的数据 
            mustache语法中既可以写变量 也可以写语法表达式
        -->
        <h1>{{name}}</h1>
        <h2>{{msg}}</h2> 
        <!-- 也可以写表达式 -->
        <!-- 三元表达式 -->
        <!-- 条件？答案1：答案2-->
        <!-- 语句  表达式
        var xx = xx; 语句
        三元表达式  n++ n-- --n ++n
        msg.toUpperCase()
        -->
        <h3>{{flag?answerY:answerN}}</h3>
    </div>
    <div>
        <h1>{{name}}</h1>
    </div>
    <div class="box2">
        <h1>{{msg}}</h1>
    </div>

    <div class="box3">
        <h1>{{obj.name}}</h1>
        <h2>{{name}}</h2>
    </div>
    <script>
        // vue是渐进式的JavaScript框架 只关心视图 主要进行声明式渲染 动态构建用户界面
        // 数据驱动视图 只关心视图层
        // 在vue当中不操作dom
        // MVVM Model-View-viewModel
        // vue不兼容ie8及以下版本
        let vm=new Vue({ //配置对象
            el:'.box',  //在哪个元素当中使用vue语法
            data:{ //data对象中的所有属性都加入到vue响应式系统，值更改 视图也会发生变化 只更改数据即可
                flag:false,
                name:'ysn',
                msg:'你准备笔记本了吗？',
                answerY:'带笔记本了',
                answerN:'没带'            }
        })
        // vm是vue的实例对象
        console.log(vm);
        // vm该对象上有很多挂着$的方法，这些方法都是vue实例对象上的方法
        // 配置对象中data的属性在哪些地方能看见？
        // 在vm的实例对象上 vm._data vm.$data
        vm.name='朴彩英';
        console.log(vm);

        let data={
            msg:'xxx'
        }
        // 冻结对象 阻断数据的响应式追踪
        // Object.freeze(data);
        let vm2=new Vue({
            el:'.box2',
            data  
        })
        vm2.msg='vvv';




        let obj={
                    name:'tom',
                    age:10
                }
        // Object.freeze(obj);
        let vm3=new Vue({
            el:'.box3',
            data:{
                obj,
                name:'jack'
            }
        })
        console.log(vm3);
        vm3.obj.name='rose';
        vm3.name='test';
    </script>
</body>
</html>